HTML Examples

HTML இன் அனைத்து தலைப்புகளும் எடுத்துக்காட்டுகளுடன்

HTML பாடத்தின் முழுமையான உள்ளடக்கம்

அடிப்படை HTML

மேம்பட்ட HTML

HTML உறுப்புகள்

மேம்பட்ட வசதிகள்

HTML உள்ளீடுகள் மற்றும் வரைகலை

கூடுதல் வசதிகள்

1 HTML அடிப்படைகள்

HTML ஆவணம்

ஒவ்வொரு HTML ஆவணமும் ஒரு குறிப்பிட்ட அமைப்பைக் கொண்டுள்ளது:

எடுத்துக்காட்டு: அடிப்படை HTML ஆவணம்

<!DOCTYPE html>
<html>
<head>
    <title>முதல் HTML பக்கம்</title>
</head>
<body>
    <h1>வணக்கம் உலகம்!</h1>
    <p>இது எனது முதல் HTML பக்கம்.</p>
</body>
</html>

HTML தலைப்புகள்

HTML இல் 6 தலைப்பு நிலைகள் உள்ளன:

எடுத்துக்காட்டு: அனைத்து தலைப்பு நிலைகள்

<h1>முக்கிய தலைப்பு</h1>
<h2>துணை தலைப்பு</h2>
<h3>சிறு தலைப்பு</h3>
<h4>துணை-சிறு தலைப்பு</h4>
<h5>சிறிய தலைப்பு</h5>
<h6>மிகச் சிறிய தலைப்பு</h6>

HTML பத்திகள்

<p> குறிச்சொல் பத்திகளை உருவாக்க பயன்படுகிறது:

எடுத்துக்காட்டு: பத்தி

<p>இது ஒரு பத்தி. HTML இல் பத்திகள் 
தானாகவே மேல் மற்றும் கீழ் விளிம்புகளைக் கொண்டிருக்கும்.</p>

❓ பயிற்சி: எந்த HTML குறிச்சொல் மிகப்பெரிய தலைப்பை உருவாக்குகிறது?

<h6>
✗ தவறு! <h6> மிகச்சிறிய தலைப்பு
<h1>
✓ சரி! <h1> மிகப்பெரிய தலைப்பு

2 HTML பண்புகள்

title பண்பு

உறுப்பிற்கு கூடுதல் தகவலைக் கொண்டு செல்கிறது:

<p title="இது ஒரு கருவி உதவி">
கருவி உதவியுடன் பத்தி
</p>

href பண்பு

இணைப்புகளுக்கு பயன்படுத்தப்படுகிறது:

<a href="https://jassifteam.com">
jassif team வலைத்தளம்
</a>

alt பண்பு

படத்திற்கு மாற்று உரை வழங்குகிறது:

<img src="logo.jpg" alt="Jassif Team Logo">

⚠️ எச்சரிக்கை: மேற்கோள்கள் இல்லாமல் பண்புகள்

பண்பு மதிப்புகளை எப்போதும் மேற்கோள்களில் இடவும்:

<!-- சரி -->
<a href="page.html">இணைப்பு</a>

<!-- தவறு -->
<a href=page.html>இணைப்பு</a>

3 HTML தலைப்புகள்

HTML கிடைமட்ட விதிகள்

<hr> குறிச்சொல் கிடைமட்ட விதியை உருவாக்குகிறது:

எடுத்துக்காட்டு

<h1>தலைப்பு 1</h1>
<hr>
<p>சில உரை</p>

HTML Head

<head> பகுதி ஆவணம் பற்றிய மேல்தகவல்களைக் கொண்டுள்ளது:

எடுத்துக்காட்டு

<head>
    <title>எனது வலைப்பக்கம்</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { background-color: lightblue; }
    </style>
</head>

4 HTML பத்திகள்

வரி முறிவுகள்

<br> குறிச்சொல் வரி முறிவை உருவாக்குகிறது:

எடுத்துக்காட்டு

<p>இது முதல் வரி.<br>
இது இரண்டாவது வரி.<br>
இது மூன்றாவது வரி.</p>

pre குறிச்சொல்

<pre> குறிச்சொல் முன் வடிவமைக்கப்பட்ட உரையைக் காட்டுகிறது:

எடுத்துக்காட்டு

<pre>
    வரி 1
    வரி 2
        உள்தள்ளப்பட்ட வரி
    வரி 3
</pre>

5 HTML ஸ்டைல்கள்

பின்னணி நிறம்

<body style="background-color: lightblue;">
</body>

உரை நிறம்

<p style="color: red;">
சிவப்பு உரை
</p>

உரை சீரமைப்பு

<p style="text-align: center;">
மையத்தில் சீரமைக்கப்பட்ட உரை
</p>

💡 உதவிக்குறிப்பு: ஸ்டைல்களின் முக்கியத்துவம்

CSS ஸ்டைல்கள் பின்வரும் வரிசையில் அமல்படுத்தப்படுகின்றன:

  1. உள்வரி ஸ்டைல்கள் (மிக உயர் முக்கியத்துவம்)
  2. உள் ஸ்டைல்கள் (<style> குறிச்சொல்)
  3. வெளி ஸ்டைல் கோப்புகள் (மிக குறைந்த முக்கியத்துவம்)

6 HTML உரை வடிவமைப்பு

எடுத்துக்காட்டு: அனைத்து வடிவமைப்பு குறிச்சொற்கள்

<b>தடிமனான உரை</b>
<strong>முக்கியமான உரை</strong>
<i>சாய்வு உரை</i>
<em>வலியுறுத்தப்பட்ட உரை</em>
<small>சிறிய உரை</small>
<mark>குறிக்கப்பட்ட உரை</mark>
<del>நீக்கப்பட்ட உரை</del>
<ins>சேர்க்கப்பட்ட உரை</ins>
H<sub>2</sub>O (கீழெழுத்து)
x<sup>2</sup> (மேலெழுத்து)

7 HTML மேற்கோள்கள் மற்றும் மேற்கோள் குறிப்புகள்

குறுகிய மேற்கோள்

<q>குறுகிய மேற்கோள்</q>

தொகுதி மேற்கோள்

<blockquote>
நீண்ட மேற்கோள்
</blockquote>

சுருக்கெழுத்து

<abbr title="Hyper Text Markup Language">
HTML
</abbr>

8 HTML கருத்துகள்

எடுத்துக்காட்டு: பல்வேறு கருத்து வகைகள்

<!-- சாதாரண கருத்து -->
<p>காட்சிப்படுத்தப்படும் உரை</p>

<!-- 
பல வரி
கருத்து
-->

<!-- முடக்கப்பட்ட குறியீடு:
<p>இந்த பத்தி காட்சிப்படுத்தப்படாது</p>
-->

9 HTML CSS

உள்வரி CSS

<p style="color: blue; font-size: 16px;">
உள்வரி ஸ்டைல்
</p>

உள் CSS

<style>
    body {
        background-color: lightgray;
    }
    h1 {
        color: navy;
    }
</style>

வெளி CSS

<link rel="stylesheet" href="styles.css">

10 HTML இணைப்புகள்

முழுமையான URL

<a href="https://jassifteam.com">
வெளி இணைப்பு
</a>

சார்புடைய URL

<a href="about.html">
உள் இணைப்பு
</a>

புதிய தாவலில் திறக்க

<a href="page.html" target="_blank">
புதிய தாவலில் திறக்க
</a>

11 HTML படங்கள்

அடிப்படை படம்

<img src="photo.jpg" alt="விளக்கம்">

பரிமாணங்களுடன் படம்

<img src="photo.jpg" alt="விளக்கம்" 
     width="300" height="200">

CSS உடன் பட அளவு

<img src="photo.jpg" alt="விளக்கம்" 
     style="width:300px;height:200px;">

12 HTML அட்டவணைகள்

எடுத்துக்காட்டு: அடிப்படை அட்டவணை

<table border="1">
    <tr>
        <th>பெயர்</th>
        <th>வயது</th>
    </tr>
    <tr>
        <td>ராமன்</td>
        <td>25</td>
    </tr>
</table>

13 HTML பட்டியல்கள்

வரிசைப்படுத்தப்படாத பட்டியல்

<ul>
    <li>காபி</li>
    <li>தேநீர்</li>
</ul>

வரிசைப்படுத்தப்பட்ட பட்டியல்

<ol>
    <li>முதல்</li>
    <li>இரண்டாம்</li>
</ol>

14 HTML தொகுதி மற்றும் உள்வரி உறுப்புகள்

எடுத்துக்காட்டு

<!-- தொகுதி உறுப்பு -->
<div>இது ஒரு தொகுதி</div>

<!-- உள்வரி உறுப்பு -->
<p>இது <span>உள்வரி</span> உறுப்பு</p>

15 HTML Div உறுப்பு

எடுத்துக்காட்டு: Div கட்டமைப்பு

<div style="background: lightblue; padding: 20px;">
    <h2>தலைப்பு</h2>
    <p>சில உரை</p>
</div>

16 HTML வகுப்புகள்

எடுத்துக்காட்டு

<div class="container">
    <p class="text-red">சிவப்பு உரை</p>
    <p class="text-blue">நீல உரை</p>
</div>

17 HTML Id

எடுத்துக்காட்டு

<div id="header">
    முகப்புப் பகுதி
</div>

<div id="content">
    உள்ளடக்கம் பகுதி
</div>

18 HTML Layout

எடுத்துக்காட்டு: அடிப்படை Layout

<div id="header">முகப்பு</div>
<div id="nav">வழிசெலுத்தல்</div>
<div id="content">உள்ளடக்கம்</div>
<div id="footer">அடிக்குறிப்பு</div>

19 HTML IFrame

எடுத்துக்காட்டு

<iframe src="https://jassifteam.com" 
        width="500" height="300">
</iframe>

20 HTML Head Elements

எடுத்துக்காட்டு: முழுமையான Head

<head>
    <title>பக்க தலைப்பு</title>
    <meta charset="UTF-8">
    <meta name="description" content="விளக்கம்">
    <meta name="keywords" content="HTML, CSS">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <style>/* உள் CSS */</style>
</head>

21 HTML Scripts

JavaScript சேர்க்க

<script>
    alert('வணக்கம்!');
</script>

வெளி JavaScript

<script src="script.js"></script>

22 HTML Computercode Elements

எடுத்துக்காட்டு

<code>குறியீடு</code>
<kbd>விசைப்பலகை உள்ளீடு</kbd>
<samp>நிரல் வெளியீடு</samp>
<var>மாறி</var>

23 HTML Forms

எடுத்துக்காட்டு: அடிப்படை வடிவம்

<form action="/submit" method="post">
    <label for="name">பெயர்:</label>
    <input type="text" id="name" name="name">
    
    <input type="submit" value="சமர்ப்பிக்கவும்">
</form>

24 HTML Form Elements

உரை புலம்

<input type="text" name="username">

கடவுச்சொல்

<input type="password" name="password">

தேர்வுப்பட்டி

<select name="city">
    <option value="chn">சென்னை</option>
    <option value="mdu">மதுரை</option>
</select>

25 HTML Input Types

பொது Input வகைகள்

<input type="text">
<input type="password">
<input type="email">
<input type="number">
<input type="date">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="submit">
<input type="button">

26 HTML Input Attributes

placeholder

<input type="text" 
       placeholder="உங்கள் பெயரை உள்ளிடவும்">

required

<input type="text" name="email" required>

readonly

<input type="text" value="மாற்ற முடியாது" readonly>

27 HTML Canvas Graphics

எடுத்துக்காட்டு: அடிப்படை Canvas

<canvas id="myCanvas" width="200" height="100">
</canvas>

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 150, 75);
</script>

28 HTML SVG Graphics

வட்டம்

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" 
            fill="red"/>
</svg>

செவ்வகம்

<svg width="200" height="100">
    <rect width="150" height="80" 
          fill="blue"/>
</svg>

29 HTML Media

வீடியோ

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

ஒலி

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

30 HTML Geolocation

எடுத்துக்காட்டு: இருப்பிடத்தைப் பெற

<button onclick="getLocation()">
    இருப்பிடத்தைப் பெறுக
</button>

<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
}
</script>

31 HTML Local Storage

எடுத்துக்காட்டு

<script>
// சேமிக்க
localStorage.setItem("name", "ராமன்");

// பெற
var name = localStorage.getItem("name");

// நீக்க
localStorage.removeItem("name");
</script>

32 HTML Media Examples

எடுத்துக்காட்டு: YouTube வீடியோ

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID">
</iframe>

33 More HTML Examples

Drag and Drop

<div draggable="true">இழுக்கக்கூடியது</div>

Web Workers

<script>
var worker = new Worker("worker.js");
</script>

Progress Bar

<progress value="70" max="100"></progress>

❓ இறுதிப் பயிற்சி: HTML இல் இருப்பிடத் தகவலைப் பெற எந்த API பயன்படுத்தப்படுகிறது?

Storage API
✗ தவறு! Storage API தரவு சேமிப்புக்கு
Geolocation API
✓ சரி! Geolocation API இருப்பிடத் தகவலைப் பெற பயன்படுகிறது